<template>
	<view class="safe-btm">
		<u-sticky bgColor="#fff">
			<view class="header">
				<view class="search">
					<image class="icon" src="@/static/img/search-01.png" mode="aspectFit"></image>
					<input class="search-inp" v-model="keyword" type="text" placeholder="请输入关键词，如：教师资格证" confirm-type="search"
						@confirm="getSizeList(true)" />
					<image class="search-btn" src="@/static/img/search-btn.png" mode="aspectFit" @click="getSizeList(true)" />
				</view>
				<u-tabs :list="tabList" lineWidth="80rpx" lineHeight="4" lineColor="#f56c6c" activeStyle="color: #FF9C00;"
					@click="toggleTab" />
			</view>
		</u-sticky>
		<view class="content safe-btm">
			<view class="ctn-item" v-for="item in sizeList" :key="item.id" @click="navToUpload(item)">
				<view class="name twoline-hide">
					{{item.name}}
				</view>
				<view class="desc-item">
					<view class="tips">
						像素
					</view>
					<view class="txt">
						{{item.px}}
					</view>
				</view>
				<view class="desc-item">
					<view class="tips">
						冲印
					</view>
					<view class="txt">
						{{item.size}}
					</view>
				</view>
				<view class="desc-item">
					<view class="tips">
						颜色
					</view>
					<view class="color-box">
						<view class="color" :style="{backgroundColor: `${colorItem.color}`}" v-for="colorItem in item.configs"
							:key="colorItem.id" />
					</view>
				</view>
			</view>
		</view>
		<Loading v-if="sizeList.length > 10" :status="loadingStatus"></Loading>
	</view>
</template>

<script>
	import Loading from '@/components/Loading.vue';
	import {
		IdPhotoApi
	} from '@/api';
	export default {
		components: {
			Loading,
		},
		data() {
			return {
				loadingStatus: 'loading',
				pageNo: 1,
				keyword: '',
				tabList: [],
				sizeList: [],
			};
		},
		onLoad() {
			this.initData()
		},
		onReachBottom() {
			this.getSizeList()
		},
		methods: {
			initData() {
				this.getTabList().then(() => this.getSizeList())
			},
			getTabList() {
				return new Promise((resolve, reject) => {
					IdPhotoApi.getDocumentSizeCats({
						p: 1,
						size: 9999
					}).then(res => {
						this.tabList = res.result.rows
						return resolve(res)
					}).catch(err => {
						console.log(err);
						this.$showToast(err.msg || err.message)
						return reject(err)
					})
				})
			},
			async getSizeList(init = false, catId) {
				try {
					if (init) {
						this.pageNo = 1
						this.sizeList = []
					}
					if (!init && this.loadingStatus === 'nomore')
						return
					this.loadingStatus = 'loading'
					let param = {
						p: this.pageNo,
						size: 10,
						cat_id: catId || this.tabList[0].id,
					}
					if (this.keyword.trim() !== '') param.keyword = this.keyword
					const res = await IdPhotoApi.getDocumentSizeList(param)
					this.sizeList = this.sizeList.concat(res.result.rows)
					if (this.sizeList.length >= res.result.count) {
						return this.loadingStatus = 'nomore'
					}
					this.pageNo += 1
					this.loadingStatus = 'loadmore'
				} catch (err) {
					uni.hideLoading()
					this.$showToast(err.msg || err.message)
				}
			},
			toggleTab(e) {
				this.getSizeList(true, e.id)
			},
			navToUpload(data) {
				this.$navTo('pages/indexs/id_photo/upload', {
					id: data.id,
					config: data.configs[0].id
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.header {
		background-color: #fff;
		padding-bottom: 20rpx;
		overflow: hidden;
	}

	.search {
		display: flex;
		align-items: center;
		margin: 50rpx 30rpx 30rpx;
		width: 690rpx;
		height: 80rpx;
		border-radius: 60rpx;
		background: #f6f6f6;
		font-size: 24rpx;

		.icon {
			margin-left: 20rpx;
			width: 32rpx;
			height: 32rpx;
		}

		.search-inp {
			flex: 1;
			margin-left: 10rpx;
		}

		.search-btn {
			margin: 0 20rpx;
			width: 136rpx;
			height: 60rpx;
		}
	}

	.content {
		display: grid;
		grid-template-columns: repeat(auto-fit, 345rpx);
		grid-gap: 30rpx 20rpx;
		padding: 30rpx 20rpx;
	}

	.ctn-item {
		padding: 0 30rpx;
		height: 340rpx;
		border-radius: 10rpx;
		background: #ffffff;
		box-shadow: 0 16rpx 40rpx 0 #00000008;

		.name {
			margin-top: 50rpx;
			color: #000000;
			font-size: 28rpx;
		}
	}

	.desc-item {
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		.tips {
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			background: #f3f3f3;
			color: #a2a2a2;
			text-align: center;
			font-size: 20rpx;
			white-space: nowrap;
		}

		.txt {
			flex: 1;
			margin-left: 48rpx;
			color: #989898;
			font-size: 20rpx;
		}

		.color-box {
			display: flex;
			align-items: center;
			margin-left: 48rpx;

			.color {
				margin-right: 10rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 10rpx;
				border: 2rpx solid #eaeaea;
				background: #ffffff;
			}
		}

		&:first-child {
			margin-top: 40rpx;
		}
	}
</style>